<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Hover Effect Ideas | Set 2</title>
		<meta name="description" content="Hover Effect Ideas: Inspiration for subtle hover effects" />
		<meta name="keywords" content="hover effect, inspiration, grid, thumbnail, transition, subtle, web design" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,500,600' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/set2.css" />
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/FourBoxes/"><span>Previous Demo</span></a>
				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19292"><span>Back to the Codrops Article</span></a></span>
			</div>
			<header class="codrops-header">
				<h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>
				<nav class="codrops-demos">
					<a href="index.html">Set 1</a>
					<a class="current-demo" href="index2.html">Set 2</a>
				</nav>
			</header>
			<div class="content">
				<h2>Julia</h2>
				<div class="grid">
					<figure class="effect-julia">
						<img src="img/21.jpg" alt="img21"/>
						<figcaption>
							<h2>Passionate <span>Julia</span></h2>
							<div>
								<p>Julia dances in the deep dark</p>
								<p>She loves the smell of the ocean</p>
								<p>And dives into the morning light</p>
							</div>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-julia">
						<img src="img/22.jpg" alt="img22"/>
						<figcaption>
							<h2>Passionate <span>Julia</span></h2>
							<div>
								<p>Julia dances in the deep dark</p>
								<p>She loves the smell of the ocean</p>
								<p>And dives into the morning light</p>
							</div>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Goliath</h2>
				<div class="grid">
					<figure class="effect-goliath">
						<img src="img/23.jpg" alt="img23"/>
						<figcaption>
							<h2>Thoughtful <span>Goliath</span></h2>
							<p>When Goliath comes out, you should run.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-goliath">
						<img src="img/24.jpg" alt="img24"/>
						<figcaption>
							<h2>Thoughtful <span>Goliath</span></h2>
							<p>When Goliath comes out, you should run.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Hera</h2>
				<div class="grid">
					<figure class="effect-hera">
						<img src="img/17.jpg" alt="img17"/>
						<figcaption>
							<h2>Tender <span>Hera</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
							</p>
						</figcaption>			
					</figure>
					<figure class="effect-hera">
						<img src="img/25.jpg" alt="img25"/>
						<figcaption>
							<h2>Tender <span>Hera</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
							</p>
						</figcaption>			
					</figure>
				</div>
				<h2>Winston</h2>
				<div class="grid">
					<figure class="effect-winston">
						<img src="img/30.jpg" alt="img30"/>
						<figcaption>
							<h2>Jolly <span>Winston</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
							</p>
						</figcaption>			
					</figure>
					<figure class="effect-winston">
						<img src="img/1.jpg" alt="img01"/>
						<figcaption>
							<h2>Jolly <span>Winston</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
								<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
							</p>
						</figcaption>			
					</figure>
				</div>
				<h2>Selena</h2>
				<div class="grid">
					<figure class="effect-selena">
						<img src="img/10.jpg" alt="img10"/>
						<figcaption>
							<h2>Happy <span>Selena</span></h2>
							<p>Selena is a tiny-winged bird.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-selena">
						<img src="img/31.jpg" alt="img31"/>
						<figcaption>
							<h2>Happy <span>Selena</span></h2>
							<p>Selena is a tiny-winged bird.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Terry</h2>
				<div class="grid">
					<figure class="effect-terry">
						<img src="img/16.jpg" alt="img16"/>
						<figcaption>
							<h2>Noisy <span>Terry</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-download"></i></a>
								<a href="#"><i class="fa fa-fw fa-heart"></i></a>
								<a href="#"><i class="fa fa-fw fa-share"></i></a>
								<a href="#"><i class="fa fa-fw fa-tags"></i></a>
							</p>
						</figcaption>			
					</figure>
					<figure class="effect-terry">
						<img src="img/26.jpg" alt="img26"/>
						<figcaption>
							<h2>Noisy <span>Terry</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-download"></i></a>
								<a href="#"><i class="fa fa-fw fa-heart"></i></a>
								<a href="#"><i class="fa fa-fw fa-share"></i></a>
								<a href="#"><i class="fa fa-fw fa-tags"></i></a>
							</p>
						</figcaption>			
					</figure>
				</div>
				<h2>Phoebe</h2>
				<div class="grid">
					<figure class="effect-phoebe">
						<img src="img/3.jpg" alt="img03"/>
						<figcaption>
							<h2>Plain <span>Phoebe</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-user"></i></a>
								<a href="#"><i class="fa fa-fw fa-heart"></i></a>
								<a href="#"><i class="fa fa-fw fa-cog"></i></a>
							</p>
						</figcaption>			
					</figure>
					<figure class="effect-phoebe">
						<img src="img/7.jpg" alt="img07"/>
						<figcaption>
							<h2>Plain <span>Phoebe</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-user"></i></a>
								<a href="#"><i class="fa fa-fw fa-heart"></i></a>
								<a href="#"><i class="fa fa-fw fa-cog"></i></a>
							</p>
						</figcaption>			
					</figure>
				</div>
				<h2>Apollo</h2>
				<div class="grid">
					<figure class="effect-apollo">
						<img src="img/18.jpg" alt="img18"/>
						<figcaption>
							<h2>Strong <span>Apollo</span></h2>
							<p>Apollo's last game of pool was so strange.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-apollo">
						<img src="img/22.jpg" alt="img22"/>
						<figcaption>
							<h2>Strong <span>Apollo</span></h2>
							<p>Apollo's last game of pool was so strange.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Kira</h2>
				<div class="grid">
					<figure class="effect-kira">
						<img src="img/17.jpg" alt="img17"/>
						<figcaption>
							<h2>Dark <span>Kira</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-home"></i></a>
								<a href="#"><i class="fa fa-fw fa-download"></i></a>
								<a href="#"><i class="fa fa-fw fa-heart"></i></a>
								<a href="#"><i class="fa fa-fw fa-share"></i></a>
							</p>
						</figcaption>			
					</figure>
					<figure class="effect-kira">
						<img src="img/5.jpg" alt="img05"/>
						<figcaption>
							<h2>Dark <span>Kira</span></h2>
							<p>
								<a href="#"><i class="fa fa-fw fa-home"></i></a>
								<a href="#"><i class="fa fa-fw fa-download"></i></a>
								<a href="#"><i class="fa fa-fw fa-heart"></i></a>
								<a href="#"><i class="fa fa-fw fa-share"></i></a>
							</p>
						</figcaption>			
					</figure>
				</div>
				<h2>Steve</h2>
				<div class="grid">
					<figure class="effect-steve">
						<img src="img/29.jpg" alt="img29"/>
						<figcaption>
							<h2>Lonely <span>Steve</span></h2>
							<p>Steve was afraid of the Boogieman.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-steve">
						<img src="img/33.jpg" alt="img33"/>
						<figcaption>
							<h2>Lonely <span>Steve</span></h2>
							<p>Steve was afraid of the Boogieman.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Moses</h2>
				<div class="grid">
					<figure class="effect-moses">
						<img src="img/24.jpg" alt="img24"/>
						<figcaption>
							<h2>Cute <span>Moses</span></h2>
							<p>Moses loves to run after butterflies.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-moses">
						<img src="img/20.jpg" alt="img20"/>
						<figcaption>
							<h2>Cute <span>Moses</span></h2>
							<p>Moses loves to run after butterflies.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Jazz</h2>
				<div class="grid">
					<figure class="effect-jazz">
						<img src="img/25.jpg" alt="img25"/>
						<figcaption>
							<h2>Dynamic <span>Jazz</span></h2>
							<p>When Jazz starts to chase cars, the whole world stands still.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-jazz">
						<img src="img/6.jpg" alt="img06"/>
						<figcaption>
							<h2>Dynamic <span>Jazz</span></h2>
							<p>When Jazz starts to chase cars, the whole world stands still.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Ming</h2>
				<div class="grid">
					<figure class="effect-ming">
						<img src="img/9.jpg" alt="img09"/>
						<figcaption>
							<h2>Funny <span>Ming</span></h2>
							<p>Ming sits in the corner the whole day. She's into crochet.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-ming">
						<img src="img/8.jpg" alt="img08"/>
						<figcaption>
							<h2>Funny <span>Ming</span></h2>
							<p>Ming sits in the corner the whole day. She's into crochet.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Lexi</h2>
				<div class="grid">
					<figure class="effect-lexi">
						<img src="img/12.jpg" alt="img12"/>
						<figcaption>
							<h2>Altruistic <span>Lexi</span></h2>
							<p>Each and every friend is special. Lexi won't hide a single cookie.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-lexi">
						<img src="img/3.jpg" alt="img03"/>
						<figcaption>
							<h2>Altruistic <span>Lexi</span></h2>
							<p>Each and every friend is special. Lexi won't hide a single cookie.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
				<h2>Duke</h2>
				<div class="grid">
					<figure class="effect-duke">
						<img src="img/27.jpg" alt="img27"/>
						<figcaption>
							<h2>Messy <span>Duke</span></h2>
							<p>Duke is very bored. When he looks at the sky, he feels to run.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
					<figure class="effect-duke">
						<img src="img/17.jpg" alt="img17"/>
						<figcaption>
							<h2>Messy <span>Duke</span></h2>
							<p>Duke is very bored. When he looks at the sky, he feels to run.</p>
							<a href="#">View more</a>
						</figcaption>			
					</figure>
				</div>
			</div>
			<nav class="codrops-demos">
				<a href="index.html">Set 1</a>
				<a class="current-demo" href="index2.html">Set 2</a>
			</nav>
			<!-- Related demos -->
			<section class="related">
				<p>Images from <a href="#">Unsplash</a>. <a href="#">Feather Icons</a>.</p>
				<p><strong>If you enjoyed this demo you might also like:</strong></p>
				<a href="http://shaggyweb.blogspot.com">
					<h3>Project by Shaggy</h3>
				</a>
			</section>
		</div><!-- /container -->
		<script>
			// For Demo purposes only (show hover effect on mobile devices)
			[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
				el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
			} );
		</script>
	</body>
</html>